<template>
  <div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
        <div class="twoBox">
          <div class="activityData">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
              <el-form-item label="" prop="queryName">
                <el-input v-model="queryParams.queryName" placeholder="主播ID/主播名称/手机号/抖音号" clearable
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <div style="margin-bottom: 14px" class="topBtn">
              <el-button type="primary" @click="handleAdd">新建主播</el-button>
            </div>
            <el-table ref="table" v-loading="loading" :data="tableData" stripe border row-key="id">
              <el-table-column label="序号" align="center" type="index" width="64px" />
              <el-table-column label="主播类型" align="center" prop="typeName"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="主播ID" align="center" prop="id" :show-overflow-tooltip="true" width="180" />
              <el-table-column label="主播昵称" align="center" prop="nickName" :show-overflow-tooltip="true" width="170" />
              <el-table-column label="手机号" align="center" prop="account" :show-overflow-tooltip="true" width="220" />
              <el-table-column label="抖音号" align="center" prop="dyNumber" :show-overflow-tooltip="true" width="120" />
              <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
              <el-table-column label="积分价值" align="center" prop="integralValue">
                <template slot-scope="scope">
                  <span>1积分抵{{scope.row.integralValue}}元</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="320" class-name="small-padding fixed-width"
                fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="resetPassWord(scope.row)">重置登录密码</el-button>
                  <el-button size="mini" type="text" @click="godyClick(scope.row)" :loading="anchorLoading">前往管理端</el-button>
                  <el-button size="mini" type="text" @click="editClick(scope.row)">修改抖音号</el-button>
                  <el-button size="mini" type="text" @click="pointsClick(scope.row)">修改积分价值</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
          </div>
        </div>
      </div>
    </div>
    <add-diglog ref="childRef" v-if="addActivities" :id="id" :pathType="pathType" :visible.sync="addActivities"
      @success="_handleSuccess" />
    <edit-diglog ref="childRef" v-if="editActivities" :id="id" :dyNumber="dyNumber" :visible.sync="editActivities"
      @success="_handleSuccess" />
    <modify-points ref="childRef" v-if="pointsVisible" :id="id" :visible.sync="pointsVisible"
      @success="_handleSuccess"></modify-points>
  </div>
</template>
<script>
import {
  getList,
  resetPwd,
  redirect,
} from "@/api/setting/anchorList"
import handlePageMixin from "@/mixins/handlePageMixin"
import addDiglog from "./components/addDiglog"
import editDiglog from "./components/editDiglog"
import modifyPoints from "./components/modifyPoints"
export default {

  name: "shopDetail",
  components: {
    addDiglog,
    editDiglog,
    modifyPoints,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      id: "",
      addActivities: false,
      editActivities: false,
      anchorLoading: false,
      pointsVisible: false,//修改积分弹窗
      pathType: "add",
      tableData: [],
      total: 0,
      queryParams: {
        queryName: "",
        pageNum: 1,
        pageSize: 10,
      },
      dyNumber: '',
      anchorTypeLs: [],
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  mounted() { },
  methods: {
    /** 查询盲盒开奖名单*/
    getList() {
      this.loading = true;
      var data = {
        ...this.queryParams,
      };
      getList(data).then((response) => {
        const { records, total } = response.result;
        console.log("response", response);
        this.tableData = records;
        this.total = total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = [];
      console.log("this.queryParams", this.queryParams);
      this.handleQuery();
    },
    //新增精选活动
    handleAdd() {
      this.addActivities = true;
      this.pathType = "add";
    },
    editClick(row) {
      this.editActivities = true;
      this.id = row.id
      this.dyNumber = row.dyNumber
    },
    //修改积分价值
    pointsClick(row){
      this.pointsVisible = true
      this.id = row.id
    },
    resetPassWord(row) {
      this.$confirm('是否重置密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPwd(row.id).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          });
        })
        .catch(() => { });
    },
    //删除
    godyClick(row) {
      console.log('process.env.VUE_APP_ANCHOR', process.env.VUE_APP_ANCHOR)
      this.anchorLoading = true
      var id = row.id
      redirect(id).then((res) => {
        // setTokenMarchant(res.result.token)
        setTimeout(() => {
          // let url = 'http://192.168.0.195:9527/admin/login' + '?token=' + res.result
          let url = process.env.VUE_APP_ANCHOR + '?token=' + res.result
          window.open(url, 'target');
          this.anchorLoading = false
        }, 700);
      })
        .finally(() => {
          setTimeout(() => {
            this.anchorLoading = false
          }, 1000);
        });
    },
    _handleSuccess() {
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}

.topBtn {
  display: flex;
  justify-content: flex-start;
}

.imgBox {
  display: flex;
  justify-content: center;

  img {
    width: 150px;
  }
}

.el-input {
  width: 350px;
}
</style>